Skip to content

refactor: 이미지 로드 리팩토링 및 최적화 설정 추가#248

Merged
nakyeonko3 merged 3 commits intomainfrom
refactor/image-load-refactor-247
Mar 22, 2025
Merged

refactor: 이미지 로드 리팩토링 및 최적화 설정 추가#248
nakyeonko3 merged 3 commits intomainfrom
refactor/image-load-refactor-247

Conversation

@nakyeonko3
Copy link
Contributor

@nakyeonko3 nakyeonko3 commented Mar 22, 2025 •
edited by coderabbitai bot
Loading

  • jpg/jpeg/png 이미지 품질을 80%로 설정
  • webp 파일에 무손실 압축 적용
  • SVG 최적화를 위한 preset-default 구성 추가
  • public 디렉토리 이미지 최적화 포함

📋 작업 세부 사항

🔧 변경 사항 요약

Summary by CodeRabbit

  • 새로운 기능
    • 웹 성능 개선: 폰트 로딩과 외부 도메인 연결 최적화를 위한 리소스 프리로딩 설정을 추가했습니다.
    • 이미지 최적화 강화: 새로운 도구와 플러그인을 도입하여 이미지 처리 및 최적화 능력을 향상시켰습니다.
    • 빌드 최적화: 분리 번들 및 크기 경고 설정을 통해 애플리케이션 빌드 관리가 개선되었습니다.
    • 이미지 로딩 성능 향상: 이미지 태그에 지연 로딩 및 우선 순위 설정을 추가했습니다.

@nakyeonko3
refactor: 이미지 로드 리팩토링 및 최적화 설정 추가
34345a9 
- jpg/jpeg/png 이미지 품질을 80%로 설정
- webp 파일에 무손실 압축 적용
- SVG 최적화를 위한 preset-default 구성 추가
- public 디렉토리 이미지 최적화 포함
@coderabbitai
Copy link

coderabbitai bot commented Mar 22, 2025 •
edited
Loading

Walkthrough

이 PR은 네 파일에 걸쳐 변경사항을 포함합니다.

  • index.html: <head> 섹션에 DNS prefetching 및 preconnecting을 위한 두 개의 새로운 <link> 요소가 추가되었습니다.
  • package.json: 이미지 처리 및 최적화를 위한 새로운 의존성(“sharp”, “svgo”, “vite-plugin-image-optimizer”)이 추가되었습니다.
  • vite.config.ts: ViteImageOptimizer 플러그인과 이미지 최적화를 위한 구성, 빌드 설정(rollupOptions 및 chunkSizeWarningLimit)이 추가되어 번들 최적화가 강화되었습니다.
  • src/components/TagCardWrap.tsx: <img> 요소에 lazy loading, 크기, fetchPriority 속성이 추가되었으며, Swiper 컴포넌트의 autoplay 관련 주석 코드가 제거되었습니다.

Changes

파일 변경 요약
index.html <head>에 DNS prefetching 및 preconnecting을 위한 <link> 요소 두 개 추가
package.json “sharp”, “svgo”, “vite-plugin-image-optimizer” 의존성 추가
vite.config.ts ViteImageOptimizer 플러그인 및 이미지 최적화, 빌드(rollupOptions, chunkSizeWarningLimit) 구성 추가
src/components/TagCardWrap.tsx <img> 요소에 loading, width, height, fetchPriority 속성 추가, autoplay 관련 주석 코드 제거

Suggested reviewers

  • haruyam15
  • Sonseongoh
  • ssumanlife
📜 Recent review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1e7c40a and 0068ed2.

📒 Files selected for processing (2)
  • index.html (1 hunks)
  • src/components/TagCardWrap.tsx (2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • index.html
  • src/components/TagCardWrap.tsx
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added the refactor Code refactoring without behavior changes label Mar 22, 2025
@github-actions
Copy link

github-actions bot commented Mar 22, 2025 •
edited
Loading

Visit the preview URL for this PR (updated for commit 0068ed2):

https://travely-3eed5--pr248-refactor-image-load-57g8i2eh.web.app

(expires Sat, 29 Mar 2025 15:30:26 GMT)

🔥 via Firebase Hosting GitHub Action 🌎

Sign: 9fb496bae76f721f53b116c5fd5e62f624b75e68

coderabbitai[bot]
coderabbitai bot reviewed Mar 22, 2025
View reviewed changes
Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between df0916b and 34345a9.

⛔ Files ignored due to path filters (1)
  • package-lock.json is excluded by !**/package-lock.json
📒 Files selected for processing (3)
  • index.html (1 hunks)
  • package.json (1 hunks)
  • vite.config.ts (2 hunks)
🔇 Additional comments (4)
package.json (1)

60-62: 이미지 최적화를 위한 의존성 추가가 적절합니다.

이미지 로딩 리팩토링 및 최적화를 위한 의존성 추가가 PR 목적에 잘 부합합니다. sharp는 고성능 이미지 처리 라이브러리이고, svgo는 SVG 최적화 도구이며, vite-plugin-image-optimizer는 이 두 도구를 활용하여 빌드 시 이미지를 최적화하는 Vite 플러그인입니다.

Also applies to: 64-65

index.html (1)

14-15: DNS prefetch와 preconnect 설정이 적절합니다.

애플리케이션 도메인에 대한 DNS prefetch와 preconnect 설정은 리소스 로딩 성능을 개선하는 좋은 방법입니다. 이 설정으로 초기 연결 시간이 단축되어 전체 페이지 로드 속도가 향상됩니다.

vite.config.ts (2)

13-46: 이미지 최적화 설정이 PR 목적에 부합합니다.

ViteImageOptimizer 설정이 PR 목적에 맞게 잘 구성되어 있습니다. 특히 다음 사항이 적절합니다:

  • jpg, jpeg, png 파일의 품질을 80%로 설정하여 파일 크기와 시각적 품질 간의 균형을 맞추었습니다.
  • webp 파일에 무손실 압축을 적용하여 최적의 품질을 유지하면서 파일 크기를 줄였습니다.
  • SVG 파일에 preset-default 구성을 적용하여 최적화하되, 중요한 viewBox 속성은 유지되도록 했습니다.
  • public 디렉토리의 이미지도 최적화 대상에 포함했습니다.

이러한 설정은 웹사이트의 로딩 속도와 성능을 향상시키는 데 도움이 될 것입니다.

53-62:

Details

✅ Verification successful

번들 최적화 설정이 추가되었습니다.

빌드 설정에 다음과 같은 최적화가 적절하게 추가되었습니다:

  • React 및 ReactDOM을 별도의 vendor 청크로 분리하여 캐싱 효율성 향상
  • chunkSizeWarningLimit을 1000으로 설정하여 대형 청크에 대한 경고 제한 조정

이러한 설정은 번들 크기 관리와 캐싱 전략 최적화에 도움이 됩니다.

다만, 추가 검토가 필요한 사항이 있습니다:

🏁 Script executed:

#!/bin/bash
# vendor 청크에 더 많은 라이브러리를 포함시키는 것이 유용할 수 있는지 확인
grep -r "from '[^@]" src/ | grep -v "from 'react\|from 'react-dom" | sort | uniq -c | sort -nr | head -10

Length of output: 848

번들 최적화 설정 검증 결과 – 승인됨

현재 vite.config.ts의 번들 최적화 설정은 아래와 같이 적절히 추가되었습니다:

  • React와 ReactDOM을 vendor 청크로 분리하여 캐싱 효율성을 높임
  • chunkSizeWarningLimit을 1000으로 설정하여 대형 청크 경고를 제한

추가 검증 스크립트의 결과를 보면, React와 ReactDOM 외의 다른 라이브러리들은 대부분 각 파일에서 한 번씩만 불러오고 있어, 지금 상태에서 추가로 vendor 청크에 포함할 라이브러리가 명확하게 두드러지지는 않습니다. 다만, 여러 스토어 파일에서 반복 사용되고 있는 zustand의 경우, 추후 성능 최적화나 캐싱 전략 측면에서 vendor 청크에 포함하는 방안을 고려해볼 수 있으니 참고하시기 바랍니다.

현재까지는 코드 변경 내용에 문제가 없으므로 승인합니다.

@nakyeonko3
refactor: webp image의 품질을 80%로 변경하여 용량을 줄임
bda68cc
@nakyeonko3
refactor: TagCardWrap에 lazyload 적용
0068ed2 
-  케러셀에서 처음 4개의 이미지는 높은 우선순위로 로드하도록함
- index.html에서 preload로 font를 가져오도록 설정한 부분 삭제
@nakyeonko3 nakyeonko3 force-pushed the refactor/image-load-refactor-247 branch from 1e7c40a to 0068ed2 Compare March 22, 2025 15:29
@resistance2 resistance2 deleted a comment from coderabbitai bot Mar 22, 2025
@nakyeonko3 nakyeonko3 merged commit 0f42160 into main Mar 22, 2025
5 checks passed
@coderabbitai coderabbitai bot mentioned this pull request Mar 22, 2025
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitai coderabbitai[bot] coderabbitai[bot] left review comments

@haruyam15 haruyam15 Awaiting requested review from haruyam15

@Sonseongoh Sonseongoh Awaiting requested review from Sonseongoh

@ssumanlife ssumanlife Awaiting requested review from ssumanlife

Assignees

@nakyeonko3 nakyeonko3

Labels

refactor Code refactoring without behavior changes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@nakyeonko3